<script setup lang="ts" name="income">
import {ref, onMounted, reactive, computed} from "vue";
import { useRoute, useRouter } from "vue-router";
import { useFinanceApi } from "/src/api/finance";

import MainColumns from "/@/components/common/main-columns.vue";
import MainHeader from "/@/components/common/main-header.vue";

const router = useRouter();
const route = useRoute();
const lxsAppData = reactive({
	tab: {
		type: ref(2),
		secondName: ref('')
	},
	tips: {
		content: ''
	},
	userInfo: {},
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			page: 1,
			page_size: 10,
			data_time: '',
			type: 0,
		},
	},
	platformData: [
		{name: '提现', path: '/finance'},
		{name: '提现记录', path: '/finance/record'},
		{name: '收益明细', path: '/finance/income'},
	],
})

// 左侧平台点击
const platformDataClick = (index) => {
	if (lxsAppData.tab.type === index) return
	router.push({
		path: lxsAppData.platformData[index].path
	})
}

// 金额之间的区别点击
const differenceShow = ref(false)
const differenceClick = () => {
	differenceShow.value = true;
}

// 搜索时间点击
const dataTimeChange = (val) => {
	lxsAppData.tableData.param.data_time = val;
	getPageData();
}

// 获取页面数据
const getPageData = async () => {
	lxsAppData.tableData.loading = true;
	const res = await useFinanceApi().getUserIncomeData(lxsAppData.tableData.param);
	setTimeout(() => {
		lxsAppData.tableData.loading = false;
	}, 500);
	console.log('获取数据中心页面数据', res.data);
	lxsAppData.userInfo = res.data.user_info;
	lxsAppData.tableData.data = res.data.lists;
	lxsAppData.tableData.total = res.data.total;
}
// 分页改变
const onHandleSizeChange = (val) => {
	lxsAppData.tableData.param.page_size = val;
	getPageData();
};
// 分页改变
const onHandleCurrentChange = (val) => {
	lxsAppData.tableData.param.page = val;
	getPageData();
};
onMounted(() => {
	lxsAppData.tab.secondName = lxsAppData.platformData[lxsAppData.tab.type].name;
	getPageData();
});
</script>

<template>
	<div class="layout-container flex">

		<MainColumns :active="lxsAppData.tab.type" :items="lxsAppData.platformData" @click="platformDataClick" />

		<div class="layout-main">

			<MainHeader :second-name="lxsAppData.tab.secondName"/>

			<div class="main-content">

				<el-row :gutter="35" class="col-header">
					<el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9" >
						<el-form-item label="日期">
							<el-date-picker
								v-model="lxsAppData.tableData.param.data_time"
								type="datetimerange"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DD HH:mm:ss"
								size="small"
								clearable
								@change="dataTimeChange"
							/>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="9" :lg="9" :xl="9" >
						<span @click="differenceClick">*点击查看金额之间区别</span>
					</el-col>
				</el-row>

				<div class="income-simple">
					<div class="income-box">
						<div class="income-box-top flex-center flex-items-center">
							<p>￥{{ lxsAppData.userInfo.accumulate_credit }}</p>
							<div class="bg-info"></div>
						</div>
						<div class="income-box-bottom flex-center flex-items-center">
							<p>累计待入账</p>
						</div>
					</div>
					<div class="income-box">
						<div class="income-box-top flex-center flex-items-center">
							<p>￥{{ lxsAppData.userInfo.accumulate_will_withdraw > 0 ? '+' + lxsAppData.userInfo.accumulate_will_withdraw : lxsAppData.userInfo.accumulate_will_withdraw }}</p>
							<div class="bg-primary"></div>
						</div>
						<div class="income-box-bottom flex-center flex-items-center">
							<p>累计可提现</p>
						</div>
					</div>
					<div class="income-box">
						<div class="income-box-top flex-center flex-items-center">
							<p>￥{{ lxsAppData.userInfo.accumulate_withdraw > 0 ? '+' + lxsAppData.userInfo.accumulate_withdraw : lxsAppData.userInfo.accumulate_withdraw }}</p>
							<div class="bg-success"></div>
						</div>
						<div class="income-box-bottom flex-center flex-items-center">
							<p>累计提现</p>
						</div>
					</div>
					<div class="income-box">
						<div class="income-box-top flex-center flex-items-center">
							<p>￥{{ lxsAppData.userInfo.surplus_will_withdraw > 0 ? '+' + lxsAppData.userInfo.surplus_will_withdraw : lxsAppData.userInfo.surplus_will_withdraw }}</p>
							<div class="bg-danger"></div>
						</div>
						<div class="income-box-bottom flex-center flex-items-center">
							<p>剩余可提现</p>
						</div>
					</div>
				</div>

				<el-card shadow="hover" class="layout-padding-auto">
					<el-table
						:data="lxsAppData.tableData.data"
						v-loading="lxsAppData.tableData.loading"
						border size="small"
						:header-cell-style="{backgroundColor: '#EEF1F5', color: '#010101'}"
						highlight-current-row
						style="width: 100%"
                        empty-text="暂无记录"
					>
						<el-table-column prop="create_at" label="日期" show-overflow-tooltip min-width="150"></el-table-column>
						<el-table-column prop="type_name" label="记账类型" show-overflow-tooltip min-width="90">
							<template #default="order">
								<div style="display: flex; justify-content: space-around">
									{{ order.row.type_name }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="credit_type_name" label="记账类目" show-overflow-tooltip min-width="90">
							<template #default="order">
								<div style="display: flex; justify-content: space-around">
									{{ order.row.credit_type_name }}
								</div>
							</template>
						</el-table-column>
						<el-table-column prop="remark" label="备注" show-overflow-tooltip min-width="180"></el-table-column>
						<el-table-column prop="num" label="金额变动" show-overflow-tooltip min-width="90">
							<template #default="order">
								<div style="display: flex; justify-content: space-around">
									{{ order.row.num > 0 ? '+' + order.row.num : order.row.num }}
								</div>
							</template>
						</el-table-column>

					</el-table>
					<el-pagination
						small
						hide-on-single-page
						@size-change="onHandleSizeChange"
						@current-change="onHandleCurrentChange"
						class="mt15"
						:pager-count="5"
						:page-sizes="[10, 20, 30]"
						v-model:current-page="lxsAppData.tableData.param.page"
						background
						v-model:page-size="lxsAppData.tableData.param.page_size"
						layout="total, sizes, prev, pager, next, jumper"
						:total="lxsAppData.tableData.total"
					>
					</el-pagination>
				</el-card>

			</div>

		</div>

	</div>


	<!--  金额之间区别-start	-->
	<el-drawer
		v-model="differenceShow"
		direction="rtl"
		size="480"
	>
		<template #header>
			<div class="drawer-header">
				<div class="header-left">
					<p>金额之间区别</p>
				</div>
			</div>
		</template>
		<div class="drawer-content">
			<el-image :src="lxsAppData.userInfo.amount_difference" lazy fit="widthFix"></el-image>
		</div>
	</el-drawer>
	<!--  金额之间区别-end	-->
</template>

<style lang="scss">
@media screen and (max-width: 800px) {
	.income-box {
		width: 45% !important;
		padding: 5px 0;
	}
}
@media screen and (max-width: 500px) {
	.el-drawer {
		width: 100% !important;
	}
	.income-box {
		width: 90% !important;
		padding: 5px 0;
	}
}
.el-form-item {
	margin-bottom: 0 !important;
}
.col-header {
	display: flex;
	align-items: center;
	justify-content: flex-start;

	span {
		font-size: 14px;
		color: #00B1FD;
		cursor: pointer;
	}
	span:hover {
		color: #00B1FD;
		font-weight: bold;
	}
}
.income-simple {
	margin-top: 20px;
	background: #FFFFFF;
	padding: 20px 0;
	border-bottom: 16px solid #F4F4F4;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;

	.income-box {
		width: 20%;
		font-size: 14px;
		color: #000000;

		.income-box-top {
			background: #F2F4F7;
			border-radius: 10px 10px 4px 4px;
			padding: 18px 0;
			position: relative;

			p {
				font-weight: bold;
				font-size: 22px;
				margin-top: 12px;
			}

			.bg-primary {
				width: 100%;
				height: 4px;
				background: #7148F8;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}

			.bg-info {
				width: 100%;
				height: 4px;
				background: #00B1FD;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}

			.bg-success {
				width: 100%;
				height: 4px;
				background: #00B259;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}
			.bg-danger {
				width: 100%;
				height: 4px;
				background: #FC661C;
				border-radius: 15px 15px 0px 0px;
				position: absolute;
				bottom: 0;
			}
		}

		.income-box-bottom {
			margin-top: 12px;
			font-weight: bold;
		}
	}
}
</style>